<template>
	<view>

		<view class="">
			<HMFilterDropdown @newArea="newArea" :newAreaShow="true" @searchFatFn="searchFatFn" :filterData="filterData" :defaultSelected="defaultSelected"
				@confirm="confirm">
			</HMFilterDropdown>
		</view>
		<view class="" style="padding: 25rpx;" v-if="lists.length">
			<block v-for="(item,i) in lists">
				<shopItem type="zhuanrang" :item="item"></shopItem>
			</block>
		</view>
		<block v-else>
			<noneList></noneList>
		</block>
		<uv-load-more :status="loadStatus" />
	</view>
</template>

<script>
	import shopItem from "@/components/shopItem/shopItem.vue"
	import HMFilterDropdown from "@/uni_modules/HM-filterDropdown/components/HM-filterDropdown/HM-filterDropdown"
	export default {
		components: {
			HMFilterDropdown,
			shopItem
		},
		data() {
			return {
				loadShow: true,
				loadStatus: 'loadmore',
				pageNum: 1,
				industry_id: 'all',
				search: '',
				lists: [],
				district: '',
				city: '',
				area: 'all',
				type: 'all',
				status: 'all',
				monthrent: 'all',
				keyword: '',
				transfer_fee: 'all',
				filterData: [{
						"name": '区域',
						"type": 'hierarchy-column',
						"submenu": [{
							"name": "不限",
							"value": "all"
						}, ]
					},

					{
						"name": '月租',
						"type": 'filter',
						"submenu": [{
							"name": '月租',
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "2千以内",
									"value": "1"
								},
								{
									"name": "2千-5千",
									"value": "2"
								},
								{
									"name": "5千-1万",
									"value": "3"
								},
								{
									"name": "1万-1.5万",
									"value": "4"
								},
								{
									"name": "1.5万-2万",
									"value": "5"
								},
								{
									"name": "2万以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '转让费',
						"type": 'filter',
						"submenu": [{
							"name": '转让费',
							"submenu": [{
									"name": '不限',
									"value": "all",
								},
								{
									"name": '5万以下',
									"value": "1",
								},
								{
									"name": '5-10万',
									"value": "2",
								},
								{
									"name": '10-20万',
									"value": "3",
								},
								{
									"name": '20-50万',
									"value": "4",
								},
								{
									"name": '50万以上',
									"value": "5",
								}
							]
						}, ]
					},
					{
						"name": '面积',
						"type": 'filter',
						"submenu": [{
							"name": '面积',
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "20以内",
									"value": "1"
								},
								{
									"name": "20-50",
									"value": "2"
								},
								{
									"name": "50-100",
									"value": "3"
								},
								{
									"name": "100-150",
									"value": "4"
								},
								{
									"name": "200-500",
									"value": "5"
								},
								{
									"name": "500以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '行业',
						"type": 'filter',
						"submenu": [{
							"submenu": []
						}, ]
					},
				],
				defaultSelected: [
					[3, 0, 1], //第0个菜单选中 一级菜单的第6项，二级菜单的第0项，三级菜单的第1项
					[2, 0, 1], //第1个菜单选中 一级菜单的第2项，二级菜单的第0项，三级菜单的第1项
					[1], //第2个菜单选中 一级菜单的第1项 一级菜单的第1项
					[
						[0],
						[1, 2, 7],
						[1, 0]
					], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
					[
						[0],
						[1],
						[1]
					] //单选菜
				],
				min_area: '',
				max_area: '',
				min_month_rent: '',
				max_month_rent: '',
				min_transfer_fee: '',
				max_transfer_fee: '',
			};
		},
		onReachBottom() {
			// 触底加载
			this.getLists()
		},
		onShow() {

			this.lists = []
			this.loadShow = true,
				this.loadStatus = 'loadmore',
				this.pageNum = 1

			uni.getStorage({
				key: 'city',
				success: res => {
					this.getLists()
					this.city = res.data
					this.filterData[0].name = res.data
				},
				fail: err => {
					this.city = ''
					this.getLists()
				}
			})
		},
		onLoad() {
			this.getHomeDetali()
		},
		methods: {
			// 筛选确定
			confirm(e) {
				// 转让费
				if (e.min_transfer_fee && e.min_transfer_fee) {
					this.min_transfer_fee = e.min_transfer_fee
					this.max_transfer_fee = e.max_transfer_fee
					this.filterData[2].name = this.min_transfer_fee + '-' + this.max_transfer_fee
				} else {
					this.min_transfer_fee = ''
					this.max_transfer_fee = ''
				}


				if (e.min_month_rent && e.max_month_rent) {
					this.min_month_rent = e.min_month_rent
					this.max_month_rent = e.max_month_rent
					this.filterData[1].name = this.min_month_rent + '-' + this.max_month_rent
				} else {
					this.min_month_rent = ''
					this.max_month_rent = ''
				}

				if (e.min_area && e.max_area) {
					this.min_area = e.min_area
					this.max_area = e.max_area
					this.filterData[3].name = this.min_area + '-' + this.max_area
				} else {
					this.min_area = ''
					this.max_area = ''
				}



				this.lists = []
				this.loadShow = true,
					this.loadStatus = 'loadmore',
					this.pageNum = 1
				if (e.value[0].length && e.index[0][0] != null) {
					// 地区
					this.city = e.value[0][0]
					this.district = e.value[0][1]
				}

				if (e.value[1].length && e.index[1][0].length) {
					// 月租
					if (!this.min_month_rent) {
						this.filterData[1].name = this.filterData[1].submenu[0].submenu[e.index[1][0]].name
					}
					this.monthrent = e.value[1][0][0]
				}
				if (e.value[2].length && e.index[2][0] != null && e.index[2][0].length) {
					// 转让费
					if (!this.min_transfer_fee) {
						this.filterData[2].name = this.filterData[2].submenu[0].submenu[e.index[2][0]].name
					}

					this.transfer_fee = e.value[2][0][0]
				}
				if (e.value[3].length && e.index[3][0].length) {
					// 面积
					if (!this.min_area) {
						this.filterData[3].name = this.filterData[3].submenu[0].submenu[e.index[3][0]].name
					}
					this.area = e.value[3][0][0]
				}
				if (e.value[4].length && e.index[4][0].length) {
					// 行业
					this.filterData[4].name = this.filterData[4].submenu[0].submenu[e.index[4][0]].name
					this.industry_id = e.value[4][0][0]
				} else {
					this.filterData[4].name = '行业'
					this.industry_id = 'all'
				}

				this.getLists()
			},
			// 搜索
			searchFatFn(e) {
				this.lists = []
				this.loadShow = true,
					this.loadStatus = 'loadmore',
					this.pageNum = 1
				this.search = e
				this.getLists()
			},
			// 列表
			getLists() {
				if (this.loadShow) {
					this.loadStatus = 'loading'
					this.loadShow = false
					this.$api.sendRequest({
						url: '/api/shop/lists',
						data: {
							page: this.pageNum,
							num: 10,
							search: this.search,
							district: this.district,
							city: this.city || 'all',
							businessarea_id: '',
							status: this.status,
							monthrent: this.monthrent,
							area: this.area,
							type: this.type,
							transfer_fee: this.transfer_fee,
							is_recommend: 0,
							is_deal: 0,
							industry_id: this.industry_id,
							shop_type: 1,
							min_area: this.min_area,
							max_area: this.max_area,
							min_month_rent: this.min_month_rent,
							max_month_rent: this.max_month_rent,
							min_transfer_fee: this.min_transfer_fee,
							max_transfer_fee: this.max_transfer_fee,
						},
						success: res => {
							this.lists.push(...res.data.data)
							if (res.data.data.length < 10) {
								this.loadShow = false
								this.loadStatus = 'nomore'
								return
							}
							this.pageNum++
							this.loadShow = true
							console.log(this.pageNum, '+++---');
							this.$forceUpdate()
						}
					})
				}
			},

			// 根据开通区域的id查下面的区
			getArea(id, i) {
				this.$api.sendRequest({
					url: '/api/index/area',
					data: {
						area_id: id
					},
					success: res => {
						let arrs = this.filterData[0].submenu[i].submenu
						arrs.push({
							name: '不限',
							value: 'all',
						})
						res.data.forEach((item, i) => {
							arrs.push({
								name: item.name,
								value: item.name,
							})
						})
						this.filterData[0].submenu[i].submenu = arrs
					}
				})

			},
			// 配置信息
			getHomeDetali() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						// 获取市+区
						res.data.operatearea.forEach((item, i) => {
							this.filterData[0].submenu.push({
								name: item.city,
								value: item.city,
								submenu: [],
								id:item.id
							})
							// this.getArea(item.id, i + 1)
						})
						this.getArea(res.data.operatearea[0].id, 1)
						// 获取行业 industry
						res.data.industry.forEach((item, i) => {
							this.filterData[4].submenu[0].submenu.push({
								name: item.name,
								value: item.id,
							})
						})
						this.$forceUpdate()
					}
				})
			},
			newArea(id,i) {
				this.getArea(id,i)
			},
			// 配置信息 --- 状态
			// configFn() {
			// 	this.$api.sendRequest({
			// 		url: '/api/index/config',
			// 		success: res => {
			// 			console.log(res.data.type_list);
			// 			let arrs = Object.values(res.data.type_list)
			// 			arrs.forEach((item, i) => {
			// 				this.filterData[4].submenu[0].submenu.push({
			// 					name: item,	
			// 					value: item,
			// 				})
			// 			})
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.icon-xiajiantou {
		font-size: 22rpx;
		color: #9299a3;
		margin-left: 8rpx;

	}
</style>
